<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/socket.io/socket.io.js"></script>
    <style>
        *{
            margin: 0; padding: 0;
        }
        ul{
            height: 100px;
            overflow: auto;
        }
        .name{
            background-color: yellow;
        }
    </style>
</head>
<body>

    

    <ul id="ul">
        
    </ul>

    <input type="text" id="input" ><button id="btn">发送</button>

    <script >

        window.onload = function() {
            var ul = document.getElementById('ul');
            var input = document.getElementById('input');
            var btn = document.getElementById('btn');

            const socket = io();
            let user = {}
    
            socket.on('connect', () => {
                console.log('连接成功')
            });
            socket.on('action-start', function(data) {
                console.log(data);
                user.name = data
            })
    
            socket.on('user-msg', function(data) {
                console.log(data);
                let li = document.createElement('li')

                let str = data.name
                console.log(
                    user.name, data.name
                )
                if (user.name === data.name) {
                    str = `<span class="name">${data.name}</span>`
                }

                li.innerHTML = `[${str}]:${data.msg}`
                ul.appendChild(li)
            })
            
            btn.onclick = function() {
                socket.emit('action-senMsg', input.value)
            }


        }


            
    </script>
</body>
</html>
